<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>汇款</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="iscroll_lite.js"></script>
<script type="text/javascript" src="xmlutil.js"></script>
<script type="text/javascript">
	
	var myScroll;
	var datajson;
// 	var datajson = [
//					{name:'张三',acc:'160432543686436576',bank:'工商银行广州市分行'},
//					{name:'李四',acc:'260432543686436576',bank:'建设银行广州市分行'},
//					{name:'王五',acc:'360432543686436576',bank:'农业银行广州市分行'},
//					{name:'小六',acc:'460432543686436576',bank:'招商银行广州市分行'}
//					];

	$(document).ready(function(){
			 $("#page2").hide();
 $("#page3").hide();
		$('.search_btn').click(function(){
			var list;
			var $ul = $("<ul></ul>")
			for(var i=0; i< datajson.package.body.payees.payee.length; i++){
				$('<li></li>')
				.attr('data',"{name:'"+datajson.package.body.payees.payee[i].name+"',accno:'"+datajson.package.body.payees.payee[i].accno+"'}")
				.html(datajson.package.body.payees.payee[i].name+","+datajson.package.body.payees.payee[i].accno)
				.appendTo($ul);
			}
			
			$ul.appendTo($('#history_list'));
			
			
			//function loaded() {
			myScroll = new iScroll('wrapper');
			//}
			//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			
		});
		
		var history_pop;
		$('.history_members_select').bind('click touchstart',function(){
			
			xmlhttp = new XMLHttpRequest();
			xmlhttp.open("GET","clientQueryPayeeList.xml",false);
			xmlhttp.send();
			s_xml=xmlhttp.responseText;
			
			datajson=xml2json(s_xml,'','normal');
		//	alert(datajson);
			datajson=eval('('+datajson+')');
			
			
		//	alert(datajson.package.body.payees.payee[0].accno);
			
			
			history_pop = $("#history_pay_list").PoP({
				title:	'选择收款人',
				width:	'90%',
				top:	20
			});
			return false;
		});
		
		var accinfo_pop;
		//$('#account_info_link').bind('click touchstart',function(){
		
		$("#account_info_link").click(function(){
			
				xmlhttp = new XMLHttpRequest();
				xmlhttp.open("GET","clientQueryBalance.xml",false);
				xmlhttp.send();
				s_xml=xmlhttp.responseText;
		//alert(s_xml);
			  var repData=xml2json(s_xml,'','normal');
			  //alert("asdfasf");
			  repData=eval('('+repData+')');
			  //alert("asdfasf12");
			  //alert('余额:'+repData.package.body.accinfo.balance);
			  var s_accno = document.getElementById('s_accno');
			  s_accno.innerHTML=repData.package.body.accno;
			  var s_balance = document.getElementById('s_balance');
			  s_balance.innerHTML=repData.package.body.accinfo.balance;
			
			accinfo_pop = $("#account_info").PoP({
				title:	'查询帐户余额',
				width:	'90%',
				top:	40
			});			
			//alert("asdfasf12");

			return false;
		});
		
		
		$("#history_list li").live('click',function(){
			var data = eval('['+$(this).attr('data')+']')[0];
			
	//		alert(data.name);
			$("#getMember").val(data.name);
			$("#getAcc").val(data.accno);
			history_pop.close();
				
		});
				
	});

	
	function loaded() {
		myScroll = new iScroll('wrapper');
	}
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	document.addEventListener('DOMContentLoaded', loaded, false);

</script>
</head>
<body>
<div id="account_info" style="display:none">
  <ul class="account_info">
    <li><span>帐户：</span><em id="s_accno"></em></li>
    <li><span>余额：</span><em id="s_balance"></em></li>
  </ul>
</div>


<div id="history_pay_list" style="display:none">
  <div class="bank_search">
    <label>关键字</label>
    <input type="text" value="" class="i_text name_txt"/>
    <input type="button" class="button blue_button search_btn" value="重新搜索"/>
  </div>
  <div class="list_wrapper">
    <div id="wrapper" class="wrapper">
      <div class="scroller history_list" id="history_list"> 
        <!--<ul>
                                <li data="{name:'张三',acc:'160432543686436576',bank:'工商银行广州市分行'}">
                                    张三，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                                <li data="{name:'李四',acc:'260432543686436576',bank:'工商银行广州市分行'}">
                                    李四，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                                <li data="{name:'王五',acc:'360432543686436576',bank:'工商银行广州市分行'}">
                                    王五，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                                <li data="{name:'张三',acc:'660432543686436576',bank:'工商银行广州市分行'}">
                                    张三，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                                <li data="{name:'张三',acc:'660432543686436576',bank:'工商银行广州市分行'}">
                                    张三，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                                <li data="{name:'张三',acc:'660432543686436576',bank:'工商银行广州市分行'}">
                                    张三，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li >
                                <li data="{name:'张三',acc:'660432543686436576',bank:'工商银行广州市分行'}">
                                    张三，660432543686436576<br/>
                                    <span>工商银行广州市分行</span>
                                </li>
                              
                               
                            </ul>--> 
      </div>
    </div>
  </div>
</div>


<div class="page_container" id="page1">
  <h1 class="heading">本行汇款</h1>
  <form action="" name="hiuk">
  	<input type="hidden" name="transFee" id="transFee">
    <ul class="round_rect_list form">
      <li class="list_item">
        <label>转出帐户</label>
        <select name="" class="select">
          <option value="">请选择</option>
          <option value="">660123242543643666</option>
        </select>
        <a href="#" id="account_info_link">余额</a> </li>
    </ul>
    <ul class="round_rect_list form">
      <li class="list_item">
        <label>收款人姓名</label>
        <input type="text" name="getMember" id="getMember" class="i_text name_txt"/>
        <a href="#" class="history_members_select">历史收款人</a> </li>
      <li class="list_item">
        <label>收款帐户</label>
        <input type="text" name="getAcc" id="getAcc" class="i_text"/>
      </li>
    </ul>
    <ul class="round_rect_list form">
      <li class="list_item">
        <label>转账金额</label>
        <input type="text" name="amount" class="i_text"/>
        元 </li>
    </ul>
    <div class="button_bar">
      <input id="btn1" type="button" class="button blue_button button_block" onclick="getFee()" value="下一步"/>
    </div>
  </form>
</div>

<div class="page_container" id="page2">
	<h1 class="heading">
    	<a href="http://www.baidu.com" class="arrow_button">
        	<div class="arrow_button_heading"></div>
        	<div class="arrow_button_body">
            	返回
            </div>
        </a>
    本行汇款
    
    </h1>
    
    <ul class="round_rect_list info_detail">
    	<li class="list_item">
        	<span>转出帐户</span>
            <em>660123242543643666</em>
        </li>
    </ul>  
    
    <ul class="round_rect_list info_detail">
    	<li class="list_item">
        	<span>收款人姓名</span>
            
            <em id="s1">张三</em>
        </li>
        <li class="list_item">
        	<span>收款帐户</span>
            <em id="s2">660123242543643666</em>
        </li>
    </ul>
    <ul class="round_rect_list info_detail">
        <li class="list_item">
        	<span>转账金额</span>
        	<em id="s3">1000.00 元</em>
            
        </li>
        <li class="list_item">
        	<span>转账手续费</span>
        	<em id="s4">1.00 元</em>
            
        </li>
    </ul>
    
    <ul class="round_rect_list form">
        <li class="list_item">
        	<label>帐户密码</label>
        	<input type="password" class="i_text" value="123456">
            
        </li>
    </ul>
    
    <div class="button_bar">
    	<input id="btn1" type="button" class="button blue_button button_block" onclick="transhi()" value="确认汇款"/> 
    </div>	
      
</div>


<div class="page_container" id="page3">
	<h1 class="heading">
    	<a href="http://www.baidu.com" class="arrow_button">
        	<div class="arrow_button_heading"></div>
        	<div class="arrow_button_body">
            	返回
            </div>
        </a>
    本行汇款
    
    </h1>
    
    <div class="message msg_success">
    	<span class="ico"></span>
        <em>转账成功！</em>
    </div>
    
    <ul class="round_rect_list info_detail">
    	<li class="list_item">
        	<span>汇款凭证号</span>
            <em id="m1">12345678</em>
        </li>
        <li class="list_item">
        	<span>转出帐户</span>
            <em id="m2">660123242543643666</em>
        </li>
    </ul>  
    
    <ul class="round_rect_list info_detail">
    	<li class="list_item">
        	<span>收款人姓名</span>
            
            <em id="m3">张三</em>
        </li>
        <li class="list_item">
        	<span>收款帐户</span>
            <em id="m4">660123242543643666</em>
        </li>
    </ul>
    
    <ul class="round_rect_list info_detail">
        <li class="list_item">
        	<span>转账金额</span>
        	<em id="m5">1000.00 元</em>
            
        </li>
         <li class="list_item">
        	<span>汇款手续费</span>
        	<em id="m6">1.00 元</em>
        </li>
    </ul>
      
</div>

</body>
</html>
<script type="text/javascript">
	function getFee(){
			
		
			 $("#page1").hide();
			 $("#page3").hide();
			 $("#page2").show();
	
			
		
				xmlhttp = new XMLHttpRequest();
				xmlhttp.open("GET","clientTransInsideFee.xml",false);
				xmlhttp.send();
				s_xml=xmlhttp.responseText;
			  var repData=xml2json(s_xml,'','normal');	
			  repData=eval('('+repData+')')
		//	  alert(repData.package.body.transfee)
				$("#transFee").val(repData.package.body.transfee);
				
		
			
				var s1 = document.getElementById('s1');
				s1.innerHTML=hiuk.getMember.value;
				var s2 = document.getElementById('s2');
				s2.innerHTML=hiuk.getAcc.value;
				var s3 = document.getElementById('s3');
				s3.innerHTML=hiuk.amount.value;
				var s4 = document.getElementById('s4');
				s4.innerHTML=hiuk.transFee.value;
			
		}
		
		function transhi(){
			 $("#page1").hide();
			 $("#page2").hide();
			 $("#page3").show();
			
				xmlhttp = new XMLHttpRequest();
				xmlhttp.open("GET","clientTransInside.xml",false);
				xmlhttp.send();
				s_xml=xmlhttp.responseText;
			  var repData=xml2json(s_xml,'','normal');	
			  repData=eval('('+repData+')');
		
			
				var m1 = document.getElementById('m1');
				m1.innerHTML=repData.package.body.journal;
				var m2 = document.getElementById('m2');
				m2.innerHTML='660123242543643666';
				var m3 = document.getElementById('m3');
				m3.innerHTML=hiuk.getMember.value;
				var m4 = document.getElementById('m4');
				m4.innerHTML=hiuk.getAcc.value;
				var m5 = document.getElementById('m5');
				m5.innerHTML=hiuk.amount.value;
				var m6 = document.getElementById('m6');
				m6.innerHTML=hiuk.transFee.value;
			
		}
		
</script>
